<!--
 * @Description: 其他损益字段
 * @Version: 1.0
 * @Autor: chwg
 * @Date: 2024-01-16 19:11:31
 * @LastEditors: chwg
 * @LastEditTime: 2024-01-16 19:11:31
-->
<template>
  <div class="break-even-fields">
    <jy-row>
      <jy-col :span="4">
        <div class="fields-label flex-auto field-cell">资本利得</div>
    </jy-col>
      <jy-col :span="3">
        <div class="fields-val flex-auto field-cell">100028</div>
    </jy-col>
      <jy-col :span="5">
        <div class="fields-label flex-auto field-cell">利息收入</div>
    </jy-col>
      <jy-col :span="3">
        <div class="fields-val flex-auto field-cell">100028</div>
    </jy-col>
      <jy-col :span="6">
        <div class="fields-label flex-auto field-cell">资金成本</div>
    </jy-col>
      <jy-col :span="3">
        <div class="fields-val flex-auto field-cell">100028</div>
    </jy-col>
      
    </jy-row>
    <jy-row>
      <jy-col :span="4">
        <div class="fields-label flex-auto field-cell">持有损益</div>
    </jy-col>
      <jy-col :span="3">
        <div class="fields-val flex-auto field-cell">100028</div>
    </jy-col>
      <jy-col :span="5">
        <div class="fields-label flex-auto field-cell">期间收益率</div>
    </jy-col>
      <jy-col :span="3">
        <div class="fields-val flex-auto field-cell">100028</div>
    </jy-col>
      <jy-col :span="6">
        <div class="fields-label flex-auto field-cell">持有期年化收益率</div>
    </jy-col>
      <jy-col :span="3">
        <div class="fields-val flex-auto field-cell">100028</div>
    </jy-col>
      
    </jy-row>
    
  </div>
</template>
    
    <script>
export default {
  components: {},
  props: {
    holdProfitLoss: {
      type: String,
      default: '2121212',
    },
    holdAnnualizedReturn: {
      type: String,
      default: '4121232',
    },
  },
  data() {
    return {}
  },
  watch: {},
  methods: {},
  mounted() {},
}
</script>
    
    <style lang="less" scoped>
.break-even-fields {
  width: 100%;
  .fields-group {
    width: 100%;
  }

  .fields-item {
    height: 28px;
    flex: 1;
  }
  .fields-label {
    background: #eff5ff;
    border: 1px solid #D3E2FF;
  }
  .fields-val {
    border: 1px solid #f0f0f0;
  }

  .flex-style {
    display: flex;
    align-items: center;
  }
  .flex-auto {
    flex: 1;
  }
  .field-cell {
    height: 28px;
    line-height: 28px;
    padding: 0 4px;
  }

  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
  }
  .bg-purple-dark {
  }
  .bg-purple {
  }
  .bg-purple-light {
  }
  .grid-content {
  }
  .row-bg {
    padding: 4px 0;
  }
}
</style>
    